<template>
  <div class="rank">
    <div class="rank-wrapper">
      <ScrollView>
        <ul>
          <li v-for="(title,key) in topList.titles" :key="key">
            <h3 class="group-title">{{ title }}</h3>
            <ul class="normal-group" v-if="title === '官方榜'">
              <li v-for="item in topList[key]" :key="item.rank.id" @click.stop="selectedItem(item.rank.id)">
                <div class="rank-left">
                  <img v-lazy="item.rank.coverImgUrl" alt="">
                  <p>{{item.rank.updateFrequency}}</p>
                </div>
                <div class="rank-right">
                  <p v-for="(song,index) in item.rank.tracks"><span>{{index + 1}}</span> {{song.first}} - {{song.second}}</p>
                </div>
              </li>
            </ul>
            <ul class="other-group" v-else>
              <li v-for="obj in topList[key]" :key="obj.rank.id" @click.stop="selectedItem(obj.rank.id)">
                <div class="rank-top">
                  <img v-lazy="obj.rank.coverImgUrl" alt="">
                  <p>{{obj.rank.updateFrequency}}</p>
                </div>
                <div class="rank-bottom">
                  <p>{{obj.name}}</p>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </ScrollView>
    </div>
    <transition>
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import ScrollView from '../components/ScrollView'
import {getTopListDetail} from '../api/index'
import MetaInfo from '../../vue.meta.info'


export default {
  name: 'Rank',
  metaInfo:MetaInfo.rank,
  components: {
    ScrollView
  },
  methods: {
    selectedItem(id){
      this.$router.push(`rank/detail/${id}/rank`)
    }
  },
  async created(){
    const topListDetail = await getTopListDetail();
    this.topList = topListDetail
    // console.log(this.topList);
  },
  data () {
    return {
      topList: {}
    }
  },

}
</script>

<style scoped lang="scss">
@import "../assets/css/variable";
@import "../assets/css/mixin";
.rank{
  width: 100%;
  height: 100%;
  .rank-wrapper{
    position: fixed;
    left: 0;
    right: 0;
    top: 184px;
    bottom: 0;
    overflow: hidden;
    @include bg_sub_color();
    .group-title{
      padding: 10px 20px;
      box-sizing: border-box;
      @include font_color();
      @include font_size($font_large);
      font-weight: bold;
    }
    .normal-group{
      li{
        display: flex;
        align-items: center;
        padding: 10px 20px;
        box-sizing: border-box;
        .rank-left{
          position: relative;
          img{
            width: 200px;
            height: 200px;
            border-radius: 10px;
          }
          p{
            position: absolute;
            left: 10px;
            bottom: 10px;
            color: #fff;
            @include font_size($font_medium_s);
          }
        }
        .rank-right{
          margin-left: 20px;
          p{
            @include font_color();
            @include font_size($font_medium);
            padding: 15px 0;
            @include no-wrap();
            span{
              @include font_active_color();
              @include font_size($font_large);
            }
          }
        }
      }
    }
    .other-group{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      li{
        padding: 10px 20px;
        box-sizing: border-box;
        .rank-top{
          position: relative;
          img{
            width: 200px;
            height: 200px;
            border-radius: 10px;
          }
          p{
            position: absolute;
            left: 10px;
            bottom: 10px;
            color: #fff;
            @include font_size($font_medium_s);
          }
        }
        .rank-bottom{
          width: 200px;
          @include no-wrap();
          p{
            padding: 10px 0;
            @include font_color();
            @include font_size($font_large);
            text-align: center;
          }
        }
      }
    }
  }
}
.v-enter{
  transform: translateX(100%);
}
.v-enter-to{
  transform: translateX(0%);
}
.v-enter-active{
  transition: transform 0.5s;
}
.v-leave{
  transform: translateX(0%);
}
.v-leave-to{
  transform: translateX(100%);
}
.v-leave-active{
  transition: transform 0.5s;
}
</style>
